<template>
    <div class="app-container" style="height: calc(100vh - 50px);overflow: hidden auto;">
        <pickv3 @clickrow="(row)=>{listData(row)}" :default="croueid" :prtefName="prtefName"></pickv3>
        <div style="padding:20px 24px;margin-top: 16px;background: #fff;border-radius: 10px;">
            <div style="font-size: 18px; display: flex;align-items: center;height: 40px;">
                知识点课程
                <p
                style="
                    font-size: 14px;
                    color: #165EFF;
                    margin: 0;
                    margin-left: 16px;
                    padding: 6px 12px;
                    background: rgba(22, 94, 255, 0.06);
                    border-radius: 8px;
                "
                >
                点击学习下列课程，学完知识点下的所有课程方可增加对应的学时
                </p>
            </div>
            <el-radio-group v-model="activeName" style="margin-top:8px;">
                <el-radio-button label="全部"
                    >全部课程</el-radio-button
                >
                <el-radio-button label="视频"
                    >视频课程</el-radio-button
                >
                <el-radio-button label="课件"
                    >电子课件</el-radio-button
                >
                <el-radio-button label="收藏"
                    >收藏课件</el-radio-button
                >
            </el-radio-group>
            <div class="pickItem" v-loading="loading">
                <van-empty
                    :description="
                    activeName == '视频'
                        ? '视频课程为空，请前往电子课件学习'
                        :activeName == '全部'?'当前知识点下暂无课程':activeName == '收藏'?'暂无收藏课件':'电子课件为空，请前往视频课程学习'
                    "
                    v-if="dataList.length == 0"
                />
                <ul style="display: flex; flex-wrap: wrap">
                    <el-card
                    :body-style="{ padding: '0px', height: '246px', }"
                    v-for="it in dataList"
                    :key="it.id"
                    class="cardBoxA"
                    >
                    <div
                        style="
                        display: flex;
                        justify-content: space-between;
                        flex-direction: column;
                        height: 100%;
                        "
                        :title="it.title"
                        @click="openCard(it)"
                    >
                        <div
                            style="display: flex; justify-content: space-between;padding: 14px;padding-bottom:0;height: 156px;"
                        :style="
                        `background:url(${it.file_type=='课件'?require('@/assets/logo/kejian.png'):require('@/assets/logo/shipin.png')}) no-repeat;background-size: 100% auto;`
                        "
                        
                        >
                        <span class="titleName">{{ it.title }}</span>
                        
                        </div>
                        <div class="bottom clearfix">
                            <div style="margin-bottom: 16px;"  class="hovertitleName" >
                                {{ it.title }}
                            </div>
                            <div style="display: flex;justify-content: space-between;align-items: center;">
                                <p
                                    v-if="Boolean(it.done)"
                                    style="
                                    border-radius: 2px;
                                    color: #D0021B;
                                    text-align: center;
                                    background: rgba(208, 2, 27, 0.06);
                                    padding: 2px 4px;
                                    margin: 0;
                                    "
                                >
                                    已学习
                                </p>
                                <p
                                    v-else
                                    style="
                                    border-radius: 2px;
                                    color: #165EFF;
                                    text-align: center;
                                    background: #EAF0FF;
                                    padding: 2px 4px;
                                    margin: 0;
                                    "
                                >
                                    待学习
                                </p>
                                <div
                                    v-if="activeName != '收藏'"
                                    class="Collection"
                                    :title="it.collected ? '取消收藏' : '收藏'"
                                >
                                    <i
                                    :class="it.collected ? 'el-icon-star-on' : 'el-icon-star-off'"
                                    @click.stop="CollectionClick(it)"
                                    ></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    </el-card>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import pickv3 from '../admin/components/pickv3.vue'
import {
  materialkmlist,
  materialList,
  collectlist,
  materialCollect,
  materialCancelcollect,
} from "@/api/admin.js";
import { getsubject_id, getsubjectTitle, getapplyid } from "@/utils/auth";
import Pagination from "@/components/Pagination";
import { learnImglist } from "@/utils/learnImg.js";
export default {
    components:{pickv3},
    data() {
        return {
        value: "",
        subjct: "",
        serchinput: "",
        list: [],
        dataList: [], //内容表
        fileData: [],
        arrs: '',
        page: 1,
        limit: 6,
        total: 0,
        loading: false,
        govideoIsyes: false,
        activeName:'全部',
        croueid:'',
        datarow:{},
        prtefName:'',
        };
    },
    watch:{
        activeName(val){
            if(this.datarow){
                this.listData(this.datarow)
            }
        }

    },
    methods: {
        command(item) {
        if (item.status == "已学完") {
            this.value = item.title + "—" + item.score + "学时" + "(已学完)";
        } else {
            this.value = item.title + "—" + item.score + "学时";
        }
        this.subjct = item.id;
        this.$emit("msidBox", item.id);
        if (
            this.activeName == "课件" ||
            this.activeName == "视频" ||
            this.activeName == "全部"
        ) {
            this.fileList(this.activeName);
        } else {
            this.collList();
        }
        },
        //课件条件列表
        listData(row) {
            this.dataList = [];
            this.datarow=null
            if(!row.id){
                return
            }
            this.subjct = row.id;
            this.datarow = row
            if (
                this.activeName == "课件" ||
                this.activeName == "视频" ||
                this.activeName == "全部"
            ) {
                this.fileList(row);
            } else {
                this.collList();
            }
        },
        handleipt() {
        this.page = 1;
        this.pagination();
        },
        //视频  课件 列表
        fileList(row) {
        
        this.loading = true;
        materialList({
            msid: row.id,
            file_type: this.activeName == "全部" ? "" : this.activeName,
            page: 1,
            limit: 1000000,
            applyid: getapplyid(),
        }).then((res) => {
            this.dataList = [];
            this.loading = false;
            if (res.code == 200) {
            if (Object.keys(res.data).indexOf("scoreGqLimit") != -1) {
                this.govideoIsyes = res.data.scoreGqLimit;
            } else {
                this.govideoIsyes = false;
            }
            // res.data.list.map((item) => {
            //     let list = JSON.parse(item.material_subject_full);
            //     if (!item.cover_path) {
            //         for (let i = 0; i < learnImglist.length; i++) {
            //             for (let k = 0; k < list.length; k++) {
            //             let el = list[k];
            //             if (
            //                 el &&
            //                 el.indexOf(learnImglist[i].id) != -1 &&
            //                 (el.indexOf(learnImglist[i].id) - el.indexOf(this.subjct) <
            //                 2 ||
            //                 el.indexOf(learnImglist[i].id) - el.indexOf(this.subjct) >
            //                     2)
            //             ) {
            //                 item.cover_path = learnImglist[i].src;
            //                 break;
            //             }
            //             }
            //         }
            //     }
            // });
            this.dataList = res.data.list;
            // for (let i = 0; i < res.data.list.length; i++) {
            //   let item = res.data.list[i];
            //   if (i % 5 == 0) {
            //     this.dataList.push([]);
            //     num++;
            //   }
            //   this.dataList[num].push(item);
            // }
            }
        });
        },
        //收藏列表
        collList() {
        this.dataList = [];
        this.loading = true;
        collectlist({ msid: this.subjct, subjectid: getsubject_id() }).then(
            (res) => {
            this.dataList = [];
            this.loading = false;
            if (res.code == 200) {
                this.dataList = res.data;
                // let num = -1;
                // for (let i = 0; i < res.data.length; i++) {
                //   let item = res.data[i];
                //   if (i % 5 == 0) {
                //     this.dataList.push([]);
                //     num++;
                //   }
                //   this.dataList[num].push(item);
                // }
            }
            }
        );
        },
        pagination() {
        this.fileList(this.activeName);
        },
        openCard(item) {
        if (this.govideoIsyes) {
            return this.$message.error("今天已学学时已达标，请明天继续学习");
        }
        if (item.file_type == "视频") {
            this.$router.push(
            "/curriculum/video?id=" +
                item.id +
                "&subjctid=" +
                this.subjct +
                "&type=视频" +
                "&route=" +
                this.$router.currentRoute.path +
                "&MediaId=" +
                item.MediaId
            );
        }
        if (item.file_type == "课件") {
            this.$router.push(
            "/curriculum/pdf?pdf=" +
                item.file_path +
                "&id=" +
                item.id +
                "&subjctid=" +
                this.subjct +
                "&type=课件"
            );
        }
        },
        CollectionClick(data) {
        if (data.collected == 0) {
            materialCollect({
            subjectid: getsubject_id(),
            msid: this.subjct,
            mid: data.id,
            }).then((res) => {
            if (res.code == 200) {
                data.collected = 1;
                this.$message.success("收藏成功");
            } else {
                this.$message.error("收藏失败");
            }
            });
        } else {
            materialCancelcollect({
            subjectid: getsubject_id(),
            msid: this.subjct,
            mid: data.id,
            }).then((res) => {
            if (res.code == 200) {
                data.collected = 0;
                this.$message.success("取消收藏成功");
            } else {
                this.$message.error("取消收藏失败");
            }
            });
        }
        },
    },
    created(){
        this.croueid = 'true'
        if (Object.keys(this.$route.params).length != 0) {
            this.croueid = this.$route.params.id;
            this.prtefName = this.$route.params.params.cate;
        }
        if (Object.keys(this.$route.query).length != 0) {
            this.croueid = this.$route.query.subjct;
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-input-group__append {
    background: none !important;
    border-color: none;
    color: #3b7cff !important;
  }
  .el-tabs__content {
    height: calc(100% - 55px);
    .el-tab-pane {
      height: 100%;
    }
  }
  .el-radio-button {
    margin-bottom: 0 !important;
    margin-right: 30px !important;
    .el-radio-button__inner {
      border: none !important;
      border-radius: 4px;
      padding: 10px 0;
      color: #69718C;
    }
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    border-radius: 4px;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
  }
  .el-radio-group{
    .is-active{
        .el-radio-button__inner{
            color: #1F264F;
        }
    }
  }
}
.pickItem {
  height: calc(100% - 38px - 52px);
  ul {
    min-height: 94px;
    margin-left: -17px;
    width: calc(100% + 34px);
  }
  .Collection {
    // position: absolute;
    // top: 0px;
    // right: 0px;
    .el-icon-star-on:before {
      color: #f5a623;
      font-size: 24px;
    }
    .el-icon-star-off:before {
      font-size: 24px;
    }
  }
  .time {
    font-size: 14px;
    color: #999;
    margin-left: 10px;
  }

  .bottom {
    padding: 14px;
    padding-top: 10px;
    padding-bottom: 20px;
    // position: relative;
    width: 100%;
    flex: 1;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 220px;
    display: block;
  }

  //   .clearfix:before,
  //   .clearfix:after {
  //       display: table;
  //       content: "";
  //   }

  .clearfix:after {
    clear: both;
  }
  .el-card {
    width: 292px;
    border: none;
    cursor: pointer;
  }
}
.jiaobiao {
  display: none;
  position: absolute;
  top: 20px;
  right: -80px;
  transform: rotate(40deg);
  background: #f00;
  // padding:10px;
  height: 30px;
  width: 200px;
}
.jiaobiaoText {
  display: none;
  position: absolute;
  // padding:10px;
  transform: rotate(40deg);
  top: 15px;
  right: 15px;
  color: #fff;
}
.cardBoxA {
  // margin-left: 10px;
  border-radius: 12px;
  margin: 10px 17px;
  
  // &:first-child {
  //   margin-left: 0;
  // }
  .titleName {
    display: block;
    width: 164px;
    margin-top: 46px;
    // text-overflow: ellipsis;
    // overflow: hidden;
    // white-space: nowrap;
    height: 70px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
  }
  .hovertitleName{
    width:100%;
    font-size: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  &:hover {
    .hovertitleName {
      color: #175dff;
    }
  }
}
</style>
